<template>
    <div class="beside">
        <div class="sign">
            <div class="left">
                <span v-if="signVO.sign" style="font-weight: bold"
                    >连续签到
                    <span style="color: firebrick">{{ signVO.signCount }}</span> 天！</span
                >
                <span v-else style="font-weight: bold">上午好！</span>
                <div class="sign-end">
                    <span>点亮社区的每一天</span>
                </div>
            </div>
            <el-button v-if="signVO.sign" type="primary" style="margin-left: auto" plain disabled>
                已签到
            </el-button>
            <el-button v-else style="margin-left: auto" type="primary" @click="chickSign"
                >去签到</el-button
            >
        </div>
        <div class="hot" style="margin: 20px 0">
            <div data-v-32ef48a4="" class="hot-item-header"
                ><div class="hot-title"
                    ><img
                        data-v-32ef48a4=""
                        src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/65d192768e254a768c4391e2b92a4bb6~tplv-k3u1fbpfcp-watermark.image?"
                        type="icon"
                        alt="icon"
                        class="hot-icon"
                    />
                    <span title="文章榜" class="title-text"> 文章榜 </span></div
                >
                <div class="item-header-button"
                    ><svg
                        data-v-32ef48a4=""
                        width="16"
                        height="16"
                        viewBox="0 0 16 16"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        class=""
                    >
                        <path
                            data-v-32ef48a4=""
                            fill-rule="evenodd"
                            clip-rule="evenodd"
                            d="M9.66667 6.66667C9.48257 6.66667 9.33333 6.51743 9.33333 6.33333V5.66667C9.33333 5.48257 9.48257 5.33333 9.66667 5.33333L11.8303 5.3334C10.987 4.12437 9.58586 3.33333 8 3.33333C5.42267 3.33333 3.33333 5.42267 3.33333 8C3.33333 10.5773 5.42267 12.6667 8 12.6667C10.1139 12.6667 11.8996 11.2611 12.4733 9.33358L13.8513 9.33355C13.2449 12.0054 10.8554 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C9.88507 2 11.5671 2.86932 12.6671 4.22893L12.6667 2.33333C12.6667 2.14924 12.8159 2 13 2H13.6667C13.8508 2 14 2.14924 14 2.33333V6C14 6.35145 13.728 6.63939 13.3831 6.66484L13.3333 6.66667H9.66667Z"
                            fill="#8A919F"
                        ></path>
                    </svg>
                    <span class="text" @click="chickContent">换一换</span></div
                ></div
            >
            <div
                v-for="(contentHotVO, index) in contentHotVOs.slice(
                    current * size,
                    current * size + size
                )"
                :key="index"
                class="hot-item"
                @click="toShowContent(contentHotVO.id)"
            >
                <span
                    :class="{
                        'body-index': true,
                        'first-index': current * size + index + 1 == 1,
                        'second-index': current * size + index + 1 == 2,
                        'third-index': current * size + index + 1 == 3
                    }"
                >
                    {{ current * size + index + 1 }}
                </span>
                <span> {{ contentHotVO.title }} </span>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import { defineComponent } from 'vue';

    export default defineComponent({
        name: 'BlogContextBeside'
    });
</script>

<script lang="ts" setup>
    import { getHot } from '@/api/content/content/api';
    import { onMounted, ref } from 'vue';
    import { ContentHotVO } from '@/api/content/content/content';
    import router from '@/router';
    import { getSign, sign } from '@/api/user/api';
    import { SignVO } from '@/api/user/user';
    const contentHotVOs = ref<ContentHotVO[]>([]);
    const signVO = ref<SignVO>({
        sign: false,
        signCount: '',
        signStatus: ''
    });
    const current = ref(0);
    const size = 5;
    onMounted(() => {
        loadContentHotVO();
        loadSign();
    });

    function loadContentHotVO() {
        getHot().then(({ data }) => {
            contentHotVOs.value = data;
        });
    }

    function chickContent() {
        if (contentHotVOs.value.length - current.value * size > 5) {
            current.value++;
        }
    }

    function toShowContent(id: string) {
        router.push({
            path: `/show/${id}`
        });
    }

    async function chickSign() {
        await sign();
        await loadSign();
    }

    async function loadSign() {
        const { data } = await getSign();
        signVO.value = data;
    }
</script>

<style scoped>
    .sign {
        width: 260px;
        height: 90px;
        background-color: white;
        padding: 20px 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-items: center;
    }

    .sign-end {
        font-size: 10px;
        color: #606266;
        margin-top: 10px;
    }

    .beside {
        width: 260px;
    }

    .hot {
        height: 300px;
        background-color: white;
        padding: 20px 25px;
    }

    .hot-item {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 12px 5px;
    }

    .hot-item:hover {
        background-color: #e7e7e7;
        cursor: pointer;
    }

    .hot-item-header {
        display: flex;
        justify-items: center;
        align-items: center;
        padding-bottom: 14px;
        border-bottom: 1px #bdbdbd solid;
    }

    .hot-title {
        display: flex;
        justify-items: center;
        align-items: center;
    }

    .item-header-button {
        display: flex;
        justify-items: center;
        align-items: center;
        margin-left: auto;
    }

    .item-header-button:hover {
        color: #409eff;
        cursor: pointer;
    }

    .hot-icon {
        width: 20px;
        height: 20px;
        line-height: 0;
        margin-right: 4px;
    }

    .first-index {
        background: linear-gradient(180deg, #f64242 20%, rgba(246, 66, 66, 0.4) 80%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .second-index {
        background: linear-gradient(180deg, #ff7426 20%, rgba(255, 116, 38, 0.4) 80%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .third-index {
        background: linear-gradient(180deg, #ffac0c 20%, rgba(255, 172, 12, 0.4) 80%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .body-index {
        font-weight: 800;
        min-width: 18px;
        line-height: 22px;
        margin: 0 0.92rem 0 0;
        text-align: left;
    }

    @media (max-width: 780px) {
        .beside {
            display: none;
        }
    }
</style>
